<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" /><meta content="telephone=no" name="format-detection" />
<link href="../assets/mobile/comm.css" rel="stylesheet" type="text/css" />
<link href="../assets/mobile/goods.css" rel="stylesheet" type="text/css" />
<link href="../assets/mobile/top.css" rel="stylesheet" type="text/css" />
<script src="../assets/js/mobile/jquery190.js" type="text/javascript"></script>
<link rel="stylesheet" href="../assets/agile/css/ratchet/css/ratchet.min.css">
<link rel="stylesheet" href="../assets/agile/css/flat/flat.component.css">
<link rel="stylesheet" href="../assets/agile/css/flat/iconline.css">
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/local.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script src="../assets/js/mobile/team_goodsInfoFun.js" type="text/javascript"></script>
<script src="../assets/js/mobile/GoodsPicSlider.js" type="text/javascript"></script>
<script src="../assets/js/mobile/PeriodSlider.js" type="text/javascript"></script>
<style>
body{
	position:inherit;
}
#divLotteryTime{box-shadow:none;width:95%;}
#zom{background:#000;opacity:0.3;position:absolute;top:0;left:0;z-index:99;}
.login_ui input{margin-bottom:5px !important;padding:18px 8px !important;height:28px;line-height:28px;}
.login_ui button{margin-bottom:10px;width:100%;}
.btn-g button#submit{float:right !important; letter-spacing:1px}
.btn-g {width:100%;clear:both;}
#login_ui,#login_form{-moz-box-shadow:0px 0px 5px #333; -webkit-box-shadow:0px 0px 5px #333; box-shadow:0px 0px 5px #333;
	display:none;position:absolute;left:45%;margin-left:-40%;width:90%;top:35%;z-index:100;background:#fff;border-radius:4px;
}.pResultsR .g-snav-lst{height:80px;}
</style>
</head>
<body>
<div class="h5-1yyg-v1" id="loadingPicBlock">
<div id="zom"></div>
<div id="login_ui">
	<div style="padding:5px 5px 10px 5px;" class="login_ui">
	    <div style="text-align:right;font-size:20px;color:#3498DB;font-weight:600;margin:0 0 8px 0;"><span class="icon iconline-mark-no" id="login-ui-close"></span></div>
	    <div style="padding:0 15px;">
		<p style="text-align:left;">请在下方输入当前夺宝团的邀请码</p>
			<input type="text" name="checkcode" id="checkcode" placeholder="输入夺宝团邀请码"/>
			<div class="btn-g">
				<button class="common-btn" id="submit">确定</button>
			</div>
			<div class="clear"></div>
			<p style="text-align:left;font-size:12px;">如果你没有邀请码请联系夺宝团创始人，或你可以自己创建一个夺宝团</p>
		</div>
	</div>
</div>

<!--通用顶部-->
<div id="ios-top-box">
    <div id="header" class="bar bar-nav">
    <div class="titlebar">
    <a href="javascript:appClose('team_item',api);"><i class="iconfont iconline-arrow-left"></i></a>
    <h1 class="title">商品详情</h1>
    </div>
    </div>
</div>
<!--通用顶部结束-->
<!-- 内页顶部 -->
    <input type="hidden" value="" name="userindex"/>
    <input name="hidGoodsID" type="hidden" id="hidGoodsID" value=""/>   <!--上期获奖者id-->
    <input name="hidCodeID" type="hidden" id="hidCodeID" value=""/>     <!--本期商品id-->
	<input type="hidden" name="price" id="price"/>
	<input type="hidden" name="num" id="num"/>
	<section class="goodsCon pCon" id="scroller">
        <!-- 揭晓信息 -->
        <div class="pProcess pProcess2 jsinfo" style="margin-top:10px;display:none;">
    	    <div class="pResults">
        	    <div class="pResultsL">
            	    <a class="userindex">
            	        <img data-original="" class="ucode_img userindex lazy">
            	        <span class="ucode_user"></span>
            	    </a>
                    <s class="userindex"></s>
                </div>
        	    <div class="pResultsR">
                    <div class="g-snav">
                        <div class="g-snav-lst"  style="width:110px;">总共抢购<br><dd><b class="orange ugonumber"></b><br>人次</dd></div>
                        <div class="g-snav-lst">揭晓时间<br><dd class="gray9"><span class="q_end_time"></span></dd></div>
                        <div class="g-snav-lst">抢购时间<br><dd class="gray9"><span class="ugorecode_time"></span></dd></div>
                    </div>
                </div>
        	    <p><a href="javascript:;" class="fr">查看计算结果</a>幸运抢购码：<b class="orange q_user_code"></b></p>
            </div>
        </div>

		<!-- 揭晓倒计时-->
		<div id="divLotteryTime" class="pProcess clearfix" data-id="0" data-endtime="-120" style="margin:10px auto;display:none;">
			<div class="pCountdown">
				<div class="g-snav">
					<div class="g-snav-lst">揭晓<br>倒计时<s></s></div>
					<div class="g-snav-lst"><b class="minute">99</b><em>分</em></div>
					<div class="g-snav-lst"><b class="second">99</b><em>秒</em></div>
					<div class="g-snav-lst"><b class="millisecond">99</b><em>毫秒</em></div>
				</div>
			</div>
		</div>

        <!-- 产品图 -->
        <div class="pPic pPicBor" style="padding-top:5px;">
            <div class="pPic2">
    	        <div id="sliderBox" class="pImg">
                    <div class="loading"><b class="loading-img"></b>正在加载</div>
                    <ul class="slides">
						<li><img class="lazy" data-original="" class="animClass" /></li>
                    </ul>
                </div>
            </div>
            <!-- <span id="spAutoFlag" class="z-limit-tips">限时揭晓</span> -->
        </div>

        <!-- 条码信息 -->
        <div class="pDetails" style="border:none;">
                <p class="titleName">加载中...</p>
                <p class="price">价值：<em class="arial gray">￥0.00</em></p>
				<progress max="100" value="0" class="css3" title="已完成0%">
					<div class="progress"></div>
				</progress>
				<div class="Progress-bar">
					<ul class="Pro-bar-li">
						<li class="P-bar01"><em class="canyurenshu">加载中...</em>已参与</li>
						<li class="P-bar02"><em class="zongrenshu">加载中...</em>总需人次</li>
						<li class="P-bar03"><em class="yurenshu">加载中...</em>剩余</li>
					</ul>
				</div>

			   <div class="pClosed action_pClosed" style="display:none;">正在揭晓</div>
			   <div class="pClosed over_pClosed" style="display:none;">本团已揭晓</div>
               <!-- <div id="divAutoRTime" class="pSurplus" time="{wc:$sysj}" timeAlt="{wc:fun:date('Y-m-d-H',$item['xsjx_time'])}"><p><span>限时揭晓</span>剩余时间：<em>00</em>时<em>00</em>分<em>00</em>秒</p></div> -->
               <div class="pClosed complete_pClosed" style="display:none;">下手慢了！！ 被抢光啦！！</div>
               
              <div id="btnBuyBox" class="pBtn" codeid="">
				<a id="in_login" href="javascript:;" style="width:100%;background:#dd3e96;border-color:#dd3e96;display:none;" class="fl buyBtn">立即抢购</a>
				<span id="click_login" style="width:100%;background:#dd3e96;font-size:14px;color:#fff;display:none;border-radius:4px;text-align:center;padding:5px 0;" class="fl buyBtn">立即抢购</span>
			  </div>
        </div>
		<ul class="table-view">

			  <li class="table-view-cell">
			    <a class="navigate-right" style="color:#666;" id="tgoodsdesc">图文详情</a>
			  </li>
	
			</ul>
        <!-- 参与记录，商品详细，晒单导航 -->
		<style>.table-view-cell p{font-size:16px;text-align:center;padding:6px 0;}.table-view-cell div.text{float:left;}.table-view-cell span{float:right;}</style>
        <div class="joinAndGet">
			<ul class="table-view">
			  <li class="table-view-cell">
			  	<p>参团亲友详情</p>
			  </li>
			</ul>
        </div>
    </section>
</div>
<script type="text/javascript" src="../script/layer.mobile/layer.js"></script>
<script>
apiready = function(){
	$(function(){
		  var isAuto = {action : true};
		  var goods_id = localData.get('team_goods_id');
		  if(!goods_id){
			  api.alert({msg:'参数错误'});
			  return;
		  }
		  if(getUserinfo()){
			  $('#in_login').show();
		  }else{
			  $('#click_login').click(function(){
				  api.openWin({name:'login',url:'./login.html',reload:true});
			  });
		  }

		  $('.fr').click(function(){
			  localData.set('team_dataserver_id',goods_id);
			  api.openWin({name:'js_result',url:'./js_result.html',reload:true});
		  });
		  
		  function loadscroller(){
		      $("#divPeriod").touchslider();
		      $("#sliderBox").picslider();
		  }
		  
		  $('#tgoodsdesc').click(function(){
			  api.openWin({name:'tgoodsdesc',url:'./tgoodsdesc.html',reload:true});
		  });
		  
		  GetJPData(config.url+'/app.php?act=teamitem&goods_id='+goods_id,{},function(data){
			  if(data['status'] == 1){
			        var imgs = '';
			        for(var i in data['item']['picarr']){
			            imgs += '<li><img src="'+config.upload_url+'/'+data['item']['picarr'][i]+'" class="animClass" /></li>';
			        }
			        if(data['item']['picarr'] == ''){
			            imgs += '<li><img src="'+config.upload_url+'/'+data['item']['thumb']+'" class="animClass" /></li>';
			        }
			        $('.pImg .slides').html(imgs);
			        loadscroller();
			        var goodsnamehtml = '<p class="goods_name">'+data['item']['title']+'<span></span></p>';
			        $('.pDetails').css('paddingTop',10);
			        $('.titleName').html(goodsnamehtml);
			        $('#hidCodeID').val(data['item']['id']);
			        $('p.price em').text('￥'+data['item']['money']);
			        $('progress').attr('value',data['item']['progress']);
			        $('progress').attr('title',data['item']['percent']);
			        $('.canyurenshu').text(data['item']['canyurenshu']);
			        $('.zongrenshu').text(data['item']['zongrenshu']);
			        $('.yurenshu').text(data['item']['yurenshu']);
			        $('#goprice').val(data['item']['yunjiage']);
			        $('#price').val(data['item']['yunjiage']);
			        $('#divLotteryTime').attr('data-id',goods_id);
			        $('#divLotteryTime').attr('data-endtime',data['item']['autoTime']);
			        if(data['item']['lottery'] == 'yes'){
			        	$('.pClosed').hide();
			        	$('.complete_pClosed').show();
			        	$('#btnBuyBox').hide();
			        	$('.q_end_time').text(data['item']['q_end_time']);
			        	$('.ucode_img').attr('data-original',config.upload_url+'/'+data['item']['q_user']['img']);
			        	$('.ucode_user').text(data['item']['q_user']['username']);
			        	$('.ugorecode_time').text(data['item']['gorecode_time']);
			        	$('.ugonumber').text(data['item']['gonumber']);
			        	$('input[name=userindex]').val(data['item']['q_uid']);
			        	$('.q_user_code').text(data['item']['q_user_code']);
			        	isAuto.action = false;
			        	autoLottery();
			        }else{
			        	ex();
			        }
			        if(data['us']){
			        	var html = '';
			        	for(var i in data['us']){
			        		html += '<li class="table-view-cell">';
			        		html += '<div class="text">'+data['us'][i]['username']+'</div>';
			        		html += '<span>（'+data['us'][i]['mo']+'）参与了'+data['us'][i]['gonumber']+'次</span></li>';
			        	}
			        	$('.joinAndGet .table-view-cell').after(html);
			        }else{
			        	$('.joinAndGet .table-view-cell').after('<p style="text-align:center;padding:10px;">暂无参与记录</p>');
			        }
			        lyzimg();
			  }else{
				  if(data['status'] == -1){
					  localData.set('team_goods_id',localData.get('team_goods_id')); 
					  api.alert({msg:data['msg']},function(index,err){
						 api.openWin({name:'js_result',url:'./js_result.html',reload:true}); 
					  });
				  }else{
					 api.alert({msg:data['msg']},function(index,err){
						 api.closeWin({name:'team_item'});
					 }); 
				  }
			  }
		  });
		  
			//揭晓倒计时
			function autoLottery(){
		    	$('.pClosed').hide();
		    	$('.complete_pClosed').show();
		    	$('#btnBuyBox').hide();
				var divLotteryTime = $('#divLotteryTime');
				divLotteryTime.show();
				if (divLotteryTime.size() > 0 ) {
					var id = divLotteryTime.attr('data-id');
					var minute = divLotteryTime.find('b.minute');
					var second = divLotteryTime.find('b.second');
					var millisecond = divLotteryTime.find('b.millisecond');
					var tips = minute.parent().prev();
					var times = (new Date().getTime()) + 1000 * divLotteryTime.attr('data-endtime');
					var timer = setInterval(function(){
						var time = times - (new Date().getTime());
						if ( time < 1 ) {
							divLotteryTime.hide();
							clearInterval(timer);
							minute.parent().remove();
							second.parent().remove();
							millisecond.parent().remove();
							var goods_id = localData.get('team_goods_id');
							$('.jsinfo').show();
							GetJPData(config.url+'/app.php?act=lottery_shop_team_set&gid='+goods_id,{},function(data){});
							return;
						}
						i =  parseInt((time/1000)/60);
						s =  parseInt((time/1000)%60);
						ms =  String(Math.floor(time%1000));
						ms = parseInt(ms.substr(0,2));
						if(i<10)i='0'+i;
						if(s<10)s='0'+s;
						if(ms<10)ms='0'+ms;
						minute.html(i);
						second.html(s);
						millisecond.html(ms);
					}, 41);
				}
			};

			function ex(){
				var autoTimes = setInterval(function(){
				    GetJPData(config.url+'/app.php?act=tget_progress&tm='+new Date().getTime(),{goods_id:goods_id},function(data){
				        if(data['status'] == 1){
				            $('progress').attr('value',data['item']['progress']);
				            $('progress').attr('title',data['item']['percent']);
				            $('.canyurenshu').text(data['item']['canyurenshu']);
				            $('.zongrenshu').text(data['item']['zongrenshu']);
				            $('.yurenshu').text(data['item']['yurenshu']);
				            $('#divLotteryTime').attr('data-id',goods_id);
				            $('#divLotteryTime').attr('data-endtime',data['item']['autoTime']);
				            if(data['item']['yurenshu'] == 0){
					        	$('.q_end_time').text(data['item']['q_end_time']);
					        	$('.ucode_img').attr('data-original',config.upload_url+'/'+data['item']['q_user']['img']);
					        	$('.ucode_user').text(data['item']['q_user']['username']);
					        	$('.ugorecode_time').text(data['item']['gorecode_time']);
					        	$('.ugonumber').text(data['item']['gonumber']);
					        	$('input[name=userindex]').val(data['item']['q_uid']);
					        	$('.q_user_code').text(data['item']['q_user_code']);
				                clearInterval(autoTimes);
				                if(isAuto.action){
				                	autoLottery();
				                }
				            }
				        }
				    });
				},2500);
			}
			
		});
};
</script>
</body>
</html>